<!DOCTYPE HTML>
  <head>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Auto Complete Widget Example 4</title>
  </head>
  <body>
    <label>选择JavaScript关键词:</label>
    <input type="text" id="suggest">
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
			$(function() {
				var suggestions = ["AJAX", "Anonymous functions", "Array", "Assignment", "Boolean", "BOM", "Callback functions", "Closures", "Comparison", "Conditionals", "Deep Copy", "Design Patterns", "DOM", "Events", "Functions", "Global Variables", "HTML Output", "Inheritance", "JSON", "Keywords", "Logical Operators", "Loops", "Math", "Namespacing", "Null", "Objects", "Operators", "Properties", "Prototype", "Regular Expressions", "Strings", "Scope", "Typeof", "Undefined", "Variables", "XHR"];
							
				//create config object
				var autocompOpts = {
					source: suggestions,
					minChars: 2,
					scrollHeight: 200,
					width: 300
				};
					
				//turn specified element into an auto complete
				$("#suggest").autocomplete(autocompOpts);
			});
		</script>
  </body>
</html>
